/*
 * @Author: yuan-3-07 2144849287@qq.com
 * @Date: 2023-01-10 14:31:48
 * @LastEditors: yuan-3-07 2144849287@qq.com
 * @LastEditTime: 2023-01-12 14:05:45
 * @FilePath: \h520221123\js\APIlindex.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
// 文档加载事件
window.addEventListener('DOMContentLoaded',function(){
//    定义数据
let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
  ];



//   遍历
apiTypeData.forEach(function(v){
   getEle('#cateList').innerHTML+=`
   <li class="${v.isnew?'bold':''}">${v.name}</li>
   `
})
getEles('#cateList li')[0].className='active';
// 给li添加点击事件
getEles('#cateList li').forEach(function(v,i){
    v.addEventListener('click',function(){
        getEles('#cateList li').forEach(function(v){
          v.classList.remove('active')
        })
        v.classList.add('active');
        
        all.innerHTML=v.innerHTML;
        keyword.value=apiTypeData[i].keyword;
    })
})





// 定义分页的变量
let currentpage=0
let pageSize=5

// 列表部分
// 定义数据
let listDataArr = [
  //第一行
  { img: "./images/API_01.jpg", name: "2021出行防疫政策指南111", price: "免费", isSpecial: false },
  { img: "./images/API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
  { img: "./images/API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
  { img: "./images/API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
  { img: "./images/API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

  //第二行
  { img: "./images/API_01.jpg", name: "2021出行防疫政策指南222", price: "免费", isSpecial: false },
  { img: "./images/API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
  { img: "./images/API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
  { img: "./images/API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
  { img: "./images/API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  //第三行
  { img: "./images/API_01.jpg", name: "2021出行防疫政策指南333", price: "免费", isSpecial: false },
  { img: "./images/API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
  { img: "./images/API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
  { img: "./images/API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
  { img: "./images/API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  //第四行
  { img: "./images/API_01.jpg", name: "2021出行防疫政策指南444", price: "免费", isSpecial: false },
  { img: "./images/API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
  { img: "./images/API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
  { img: "./images/API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
  { img: "./images/API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

]

// 遍历

// 封装
function  rander(data,curpage,page){
  getEle('#listbox').innerHTML=''

  data.slice(curpage,page).forEach(function(v){
  // console.log(v);
  getEle("#listbox").innerHTML +=`
  <li>
            <div class="enterprise  ${v.isSpecial?'':'on'}">企业专用</div>
            <div class="boxes  tcenter mt35">
                <img src="${v.img}" alt="" >
                <h2 class="f14 fw">${v.name}</h2>
                <span class="${v.price=="免费"?'green':'red'}">${v.price}</span>
            </div>
            <a href="" class="f3" >申请数据</a>
         </li>
  `
})

}

rander(listDataArr,currentpage,pageSize);







// 分页的点击效果
let spans=getEles('#pages span')
spans.forEach(function(v,i){
  v.addEventListener('click',function(){
   
    spans.forEach(v=>{
      v.className='';
    })
    // 添加类名
    this.className='active';
    rander(listDataArr,i*pageSize,(i+1)*pageSize);
  })
})











})